<template>
  <el-dialog
    title="编辑运输计划"
    :visible.sync="record.dialogVisible"
    width="800px"
    :before-close="cancel"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="发车日期" prop="departureTime">
            <el-date-picker
              v-model="form.departureTime"
              type="date"
              placeholder="请选择发车日期"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="提货日期" prop="cargoTime">
            <el-date-picker
              v-model="form.cargoTime"
              type="date"
              placeholder="请选择提货日期"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="路线" prop="path">
            <el-select v-model="form.path" clearable placeholder="请选择">
              <el-option
                v-for="dict in options"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="供应商" prop="supplier">
            <el-select
            ref="myselect"
              @change="getvaluemethod"
              v-model="form.supplier"
              clearable
              filterable
              placeholder="请选择供应商"
            >
              <el-option
                v-for="item in supplierList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="货物数量" prop="num">
            <el-input
              v-model="form.num"
              placeholder="请输入货物数量"
              type="number"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="货物单位" prop="goodsUnit">
            <el-input
              v-model="form.goodsUnit"
              placeholder="请输入货物单位"
              type=""
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="货物吨位" prop="goodsWeight">
            <el-input
              v-model="form.goodsWeight"
              placeholder="请输入货物吨位"
              type="number"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12"> </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="货物尺寸" prop="goodsSize">
            <el-input
              v-model="form.goodsSize"
              type="textarea"
              placeholder="请输入货物尺寸"
              rows="5"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-row type="flex" justify="space-between">
            <el-col :span="11">
              <el-form-item label="发货联系人" prop="sendName">
                <el-input
                  v-model="form.sendName"
                  placeholder="请输入发货人姓名"
                  type="text"
                />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="" prop="sendPhone" label-width="0px">
                <el-input
                  v-model="form.sendPhone"
                  placeholder="请输入发货人联系方式"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="发货地址" prop="sendAddress">
            <el-input v-model="form.sendAddress" placeholder="请输入发货地址" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-row type="flex" justify="space-between">
            <el-col :span="11">
              <el-form-item label="收货方联系人" prop="receiverName">
                <el-input
                  v-model="form.receiverName"
                  placeholder="请输入收货方姓名"
                />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="" prop="receiverPhone" label-width="0px">
                <el-input
                  v-model="form.receiverPhone"
                  placeholder="请输入收货方联系方式"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="收货地址" prop="receiverAddress">
            <el-input
              v-model="form.receiverAddress"
              placeholder="请输入收货地址"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="form.remark"
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getPlanDetailMsg, updatePlan,getSupplierDetail } from "@/api/tms/plan.js";
import { getSupplier } from "@/api/tms/inventory";
export default {
  props: {
    record: Object,
    line: Array,
  },
  data() {
    return {
      supplierList: [],
      form: {
        id: "",
        departureTime: "",
        cargoTime: "",
        path: "",
        supplier: "",
        num: "",
        goodsUnit: "",
        goodsWeight: "",
        goodsSize: "",
        sendName: "",
        sendPhone: "",
        sendAddress: "",
        receiverName: "",
        receiverPhone: "",
        receiverAddress: "",
        remark: "",
        saveBy: "",
      },
      // options: [{
      //     value: '1',
      //     label: '常州线-徐州'
      // }, {
      //     value: '2',
      //     label: '宝应线-徐州'
      // }, {
      //     value: '3',
      //     label: '镇江-徐州'
      // }, {
      //     value: '4',
      //     label: '泰州-徐州'
      // }, {
      //     value: '4',
      //     label: '苏南线-徐州'
      // }],
      options: this.line,
      rules: {
        // departureTime: [
        //   { required: true, message: "请选择发车日期", trigger: "blur" },
        // ],
        // cargoTime: [
        //   { required: true, message: "请选择发车日期", trigger: "blur" },
        // ],
        path: [{ required: true, message: "请选择路线", trigger: "blur" }],
        // supplier: [
        //   { required: true, message: "请选择供货商", trigger: "blur" },
        // ],
        // // num: [{ required: true, message: "请输入货物数量", trigger: "blur" }],
        // goodsUnit: [
        //   { required: true, message: "请输入货物单位", trigger: "blur" },
        // ],
        // goodsWeight: [
        //   { required: true, message: "请输入货物重量", trigger: "blur" },
        // ],
        // goodsSize: [
        //   { required: true, message: "请输入货物尺寸", trigger: "blur" },
        // ],
      },
    };
  },

  watch: {
    "record.dialogVisible": {
      deep: true,
      handler: function (newV, oldV) {
        if (newV) {
          this.getPlanDetailMsg();
        }
      },
    },
  },
  methods: {
    /** 获取计划详情 */
    getPlanDetailMsg() {
      getSupplier().then((res) => {
        for (let i in res.data) {
          this.supplierList.push({
            label: res.data[i].name,
            value: res.data[i].id,
          });
        }
      });
      let data = {
        id: this.record.id,
      };
      getPlanDetailMsg(data).then((response) => {
        let data = response.data;
        this.form = {
          id: this.record.id,
          departureTime: data.departDate,
          cargoTime: data.pickDate,
          path: data.transportLine,
          supplier: data.supplier,
          num: data.goodsNum,
          goodsUnit: data.goodsUnit,
          goodsWeight: data.goodsWeight,
          goodsSize: data.goodsSize,
          sendName: data.deliverName,
          sendPhone: data.deliverMobile,
          sendAddress: data.deliverAddress,
          receiverName: data.arrivalName,
          receiverPhone: data.arrivalMobile,
          receiverAddress: data.arrivalAddress,
          remark: data.remark,
          saveBy: data.saveBy,
        };
        if (this.form.num==0) {
          this.form.num=''
        }
      });
    },
    getvaluemethod(val) {
      getSupplierDetail(val).then((res) => {
        if (res.code == 200) {
          this.form.sendName = res.data.contact;
          this.form.sendPhone = res.data.mobile;
          this.form.sendAddress = res.data.address;
        } else {
          this.$message.error("该供货商无关联信息！");
          this.form.contact = "";
          this.form.mobile = "";
          this.form.address = "";
          // console.log(this.form);
        }
      });
    },
    submitForm() {
      this.form.supplier = this.$refs.myselect.selected.label
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let data = {
            id: this.form.id,
            departDate: this.form.departureTime,
            pickDate: this.form.cargoTime,
            transportLine: this.form.path,
            supplier: this.form.supplier,
            goodsNum: Number(this.form.num),
            goodsUnit: this.form.goodsUnit,
            goodsWeight: this.form.goodsWeight,
            goodsSize: this.form.goodsSize,
            deliverName: this.form.sendName,
            deliverMobile: this.form.sendPhone,
            deliverAddress: this.form.sendAddress,
            arrivalName: this.form.receiverName,
            arrivalMobile: this.form.receiverPhone,
            arrivalAddress: this.form.receiverAddress,
            remark: this.form.remark,
            saveBy: this.form.saveBy,
          };
          updatePlan(data).then((response) => {
            this.$modal.msgSuccess("编辑成功");
            this.$refs["form"].resetFields();
            this.$emit("refresh");
          });
        }
      });
    },
    cancel() {
      console.log(111);
      this.$emit("refresh");
    },
  },
};
</script>

<style scoped>
.row-bg {
  padding: 10px 0;
}
</style>